<style lang="sass" scoped>
    .mt50 {
        margin-top: 50px;
    }
</style>
<template>
    <div v-jurdie="'book4100'" class="container">
        <div class="search-cont">
            <el-input placeholder="请搜索" v-model.trim="search.keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-date-picker v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyyMMdd"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
            <el-button type="primary" :plain="false">搜索</el-button>
        </div>
        <div class="tabs-cont">
            <el-button
                @click="search.status=''" 
                :type="search.status===''?'primary':''">全部</el-button>
            <el-button
                @click="search.status=0" 
                :type="search.status===0?'primary':''">待审核</el-button>
            <el-button
                @click="search.status=1" 
                :type="search.status===1?'primary':''">退款中</el-button>
            <el-button
                @click="search.status=2" 
                :type="search.status===2?'primary':''">已退款</el-button>
        </div>
        <div class="table-cont">
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="serverOrderNo" label="售后编号">
                </el-table-column>
                <el-table-column prop="orderNo" label="订单编号">
                </el-table-column>
                <el-table-column prop="refundFee" label="退款金额">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="props">
                        {{props.row.status | saledStatus}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="售后时间">
                </el-table-column>
                <el-table-column prop="refundTime" label="退款时间">
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="props">
                        <el-button v-jurdie="'book4101'" @click="routerGo('saled_detail',{serverOrderNo:props.row.serverOrderNo})" type="primary" :plain="false" size="small">详情</el-button>
                        <el-button v-jurdie="'book4102'" v-if="props.row.status===0" @click="refund(props.row)" type="primary" :plain="false" size="small">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="search.total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                //列表搜索参数
                search:{
                    keyWord:'',
                    startTime:'', //	是	string	开始时间，格式yyyy-MM-dd hh:mm:ss
                    endTime:'', //	是	string	结束时间，格式yyyy-MM-dd hh:mm:ss
                    status:'', //	是	string	状态，0-待审核，1-已退款
                    pageNo:1, //	是	string	页码
                    pageSize:config.pageSize, //	是	string	当前页显示的条数
                    total:1,
                },
                dateValue:'',
                list:[],
            };
        },
        watch:{
            'dateValue'(val){
                let dates = JSON.parse(JSON.stringify(val));
                Object.assign(this.search,{
                    startTime:dates[0],
                    endTime:dates[1],
                })
            },
            'search.status'(val){
                this.getList();
            }
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                this.getList();
             });
        },
        methods: {
            handleCurrentChange(val) {
                this.search.pageNo = val;
                this.getList();
            },
            getList() {
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url: config.baseApi + "bookMall-admin/api/server/getServerOrderListPage",
                    data: param,
                    success: data => {
                        this.list = data.data.record;
                        this.search.total = data.data.totalNum;
                    }
                });
            },
            refund(item){
                popup.confirm({
                    content:'是否退款？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/server/refund',
                            data:{
                                serverOrderNo:item.serverOrderNo
                            },
                            success:()=>{
                                popup.miss({content:'退款成功！'});
                                this.getList();
                            }
                        })
                    }
                })
            }
        },
        
    };
</script>